<template>

 <el-dialog title="外研社单词 - 听力"
	           :close-on-click-modal="false"
	           :close-on-press-escape="false"
	           :visible.sync="open" custom-class="form-dialog form-dialog-large" append-to-body>


  <div class="listening-container">
    <!-- 搜索 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">




      <el-form-item label="教材" prop="bookId">
        <el-select v-model="queryParams.bookId" placeholder="请选择教材" clearable size="small" filterable>
          <el-option
            v-for="dict in dictData('sys_entity_book')"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>




      <el-form-item label="模块" prop="module">
        <el-select v-model="queryParams.module" placeholder="请选择模块" size="small" filterable @change="handleQuery">
          <el-option
            v-for="dict in moduleOptions"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="播报次数" prop="times">
        <el-select v-model="times" placeholder="请选择次数" size="small" @change="changeOptions">
          <el-option
            v-for="item in 3"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="间隔" prop="sleep">
        <el-select v-model="sleep" placeholder="请选择间隔秒数" size="small" @change="changeOptions">
          <el-option
            v-for="item in sleepOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>




    </el-form>


	  <!-- 操作 -->
	  <el-row :gutter="10" class="mb8" v-if="words && words.length > 0">

		  <el-col :span="1.5">
			  <el-button
				  type="warning"
				  plain
				  icon="el-icon-caret-right"
				  size="mini"
				  @click="handlePlay"

			  >启动</el-button>
		  </el-col>



	  </el-row>



    <!-- 列表 -->
    <div class="word-list" v-if="words && words.length > 0">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <el-divider></el-divider>
      <el-checkbox-group v-model="checkedWords" @change="handleCheckedChange">
        <el-checkbox class="word-checkbox" v-for="word in words" :label="word" :key="word">{{word}}</el-checkbox>
      </el-checkbox-group>
    </div>

  </div>
  </el-dialog>
</template>

<script>
import * as fltrpWordService from "@/api/service/fltrp/FltrpWordService";
import * as moduleService from "@/api/service/knowledge/ModuleService";
import AudioPlayer from '@/utils/audioPlayer'
const baseUrl = process.env.VUE_APP_BASE_API;
export default {
  name: "WordTrash",
	props:{
		show:{
			type: Boolean
		}
	},
  components:{
  },
	dictionaries: ['sys_entity_book', 'grade', 'sys_entity_module'],
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],

      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 外研社单词表格数据
      fltrpWordList: [],

      moduleOptions:[],
      checkAll: false,
      checkedWords: [],
      words: [],
      isIndeterminate: true,
      sleepOptions: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 0,
        bookId: null,
        grade: null,
        module: null,
      },
      // 表单参数
      form: null,
      // 回收站
      trash: null,
      audioPlayer: null,
      times: 2,
      sleep: 6000

    };
  },
  created() {
    this.open = true;
    for(let i = 4; i<= 20; i++){
      this.sleepOptions.push({
        value: i * 1000,
        label: i + '秒'
      })
    }
    this.getList();

  },
  mounted() {
    this.audioPlayer = new AudioPlayer({
      times: this.times,
      sleep: this.sleep
    });
  },
  watch: {
    open(newVal){
      if(!newVal){
        this.$emit('update:show', null);
      }
    },

    'queryParams.bookId'(val){
      this.queryParams.module = null;

      this.moduleOptions = [];
      if(val){
        moduleService.findList({bookId: val}).then(resp=> {
          this.moduleOptions = resp.items;
        })

      }
    }

  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedWords = val ? [...this.words] : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.words.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.words.length;
    },
    /** 查询外研社单词列表 */
    getList() {
      if(!this.queryParams.module){
        return ;
      }
      this.loading = true;


      fltrpWordService.findList(this.queryParams).then(res => {
        this.fltrpWordList = res.items;
        this.words = res.items.map(item => item.word);
        this.checkedWords = [... this.words];
        this.total = res.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    changeOptions(){
      this.audioPlayer.setOptions({
        times: this.times,
        sleep: this.sleep
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 恢复按钮操作 */
    handlePlay(row) {
      let words = this.fltrpWordList.filter( item => this.checkedWords.includes(item.word));
      if(words.length == 0){
        return ;
      }

      let audioSrcList = words.map(item =>{
        return baseUrl + item.audio;
      })

      this.audioPlayer.setQueue(audioSrcList);
      this.audioPlayer.play().then(resp => {
        console.log("听力结束")
      });

    }

  }
};
</script>

<style scoped lang="scss">
.listening-container{
  height: 600px;

  .word-list{
     margin-top:20px;
    .word-checkbox{
      margin-bottom: 20px;
      margin-right: 20px;

    }
  }
}
</style>
